<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import type { FormDescChild } from '@/components/form-desc/form-desc.vue';
import { INTEGRITY_LEVEL_OPTIONS } from '@/config/enum-map';
import { getEnumOptionsField } from '@/config/enum-options';
import {
  whManagerBsTbEnterpriseEditIntegrityLevelUsingPost,
  whManagerBsTbEnterpriseGetListUsingPost,
} from '@/genapi/wh';
import { computedLoading } from '@/hooks/computed-loading';
import { useAsync } from '@/hooks/use-async';

import { injectState } from '../state';

defineOptions({ name: 'DetailDialog' });

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents['PromiseDialog']>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents['FormDesc']>>();

const type = ref<'write' | 'read'>();

const beforeClose = async () => {
  if (type.value === 'write') {
    await ElMessageBox.confirm('确认关闭？');
  }
};

const trigger = async (_type: 'write' | 'read' = 'read', value = {} as any) => {
  type.value = _type;
  model.value = JSON.parse(JSON.stringify(value)) as any;
  await dialogRef.value?.open();
};

defineExpose({
  trigger,
});

const model = ref<(typeof page.records.value)[0]>({});

const title = computed(() => {
  if (type.value === 'write') {
    return '编辑';
  } else {
    return `详情`;
  }
});

const { execute, isLoading } = useAsync(async () => {
  await formDescRef.value?.formRef?.validate();
  await ElMessageBox.confirm('确认提交？', '提示', {
    type: 'warning',
  });

  await whManagerBsTbEnterpriseEditIntegrityLevelUsingPost({
    data: {
      ...model.value,
    },
  });
  ElMessage.success('提交成功');
  page.execute();
  dialogRef.value?.complete();
});

const [enterpriseOptions] = computedLoading(async () => {
  const { data } = await whManagerBsTbEnterpriseGetListUsingPost({ data: {} });
  return data?.map((item) => ({ label: item.name, value: item.id! })) ?? [];
});

const children: FormDescChild[] = [
  {
    label: '企业名称',
    prop: 'id',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <el-select-v2
        options={enterpriseOptions.value}
        v-model={model.value.id}
        placeholder="请输入"
        disabled
      />
    ),
    descItem: () => `${model.value.name ?? '-'}`,
  },
  {
    label: '诚信等级',
    prop: 'masterName',
    // rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <el-select-v2
        options={[...INTEGRITY_LEVEL_OPTIONS]}
        v-model={model.value.integrityLevel}
        placeholder="-"
      />
    ),
    descItem: () =>
      getEnumOptionsField(INTEGRITY_LEVEL_OPTIONS, 'label', model.value.integrityLevel, '-'),
  },
  {
    label: '备注',
    prop: 'integrityLevelRemark',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 2,
    formItem: () => (
      <el-input
        type="textarea"
        rows={10}
        v-model={model.value.integrityLevelRemark}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.integrityLevelRemark ?? '-'}`,
  },
];
</script>

<template>
  <PromiseDialog ref="dialogRef" :title="title" :before-close="beforeClose" w="707px!">
    <el-scrollbar h="388px!">
      <FormDesc
        ref="formDescRef"
        m="t-24px x-30px"
        :type="type === 'read' ? 'desc' : 'form'"
        form-class="gap-x-20px"
        :model="model"
        :children="children"
        :column="2"
      />
    </el-scrollbar>
    <template v-if="type === 'write'" #footer>
      <el-button @click="dialogRef?.close()">取消</el-button>
      <el-button type="primary" :is-loading="isLoading" @click="execute()">确定</el-button>
    </template>
  </PromiseDialog>
</template>
